<template>
  <el-row class="supplier-info-container mobile-small-padding">
    <div v-if="showModifyTip" class="tip-content">
      <span style="color: #666;">修改说明：</span>{{ supplierDetailInfo.modifyDesc }}
    </div>
    <!-- <div class="supplier-title-row">
      <SectionTitle title="基础信息" style="margin-bottom: 6px;flex: unset;"/>
      <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
    </div> -->
    <el-form ref="supplierDetailForm" :class="{'mobile-el-form': showMobilePage}" :label-position="showMobilePage?'left':'right'">
      <el-row :gutter="20" type="flex" class="form-content">
        <el-col class="supplier-title-row">
          <SectionTitle title="基础信息" style="margin-bottom: 6px;flex: unset;"/>
          <div v-if="canEdit" class="edit-btn" @click="handleEdit">
            编辑
            <img :src="editIcon" class="ml4">
          </div>
        </el-col>
        <template v-for="item in formLabels">
          <el-col v-if="!item.hide" :key="item.key" :span="item.key === 'remark' ? 24 : 8" :class="item.key === 'remark' && 'remark-row'" class="info-col-item">
            <el-form-item v-if="item.type === 'file'" :label="item.label" label-width="8em">
              <div style="display:flex;">
                <FileShowList :file-list="supplierDetailInfo[item.key]" is-show-single-file />
              </div>
            </el-form-item>
            <el-form-item v-else-if="item.key === 'isSignUp'" :label="item.label" label-width="8em">
              <div v-if="supplierDetailInfo[item.key] === true">是</div>
              <div v-else-if="supplierDetailInfo[item.key] === false">否</div>
              <div v-else>--</div>
            </el-form-item>
            <el-form-item v-else-if="item.key === 'tag'" label="标签：" label-width="8em">
              <TagSelect v-model="supplierDetailInfo.tag" mode="detail" />
            </el-form-item>
            <el-form-item v-else-if="item.key === 'channelName'" label="供应商名称：" label-width="8em">
              <div class="channelName-container">
                <ToolTip :content="supplierDetailInfo.channelName" style="max-width: calc(100% - 70px);" />
                <SearchContract v-if="supplierDetailInfo.channelName" :opp-company-id="supplierId" :opp-company="supplierDetailInfo.channelName" :opp-company-type="0" />
              </div>
            </el-form-item>
            <template v-else-if="item.key === 'remark'">
              <div class="remark-label">备注:</div>
              <div :style="{color: supplierDetailInfo[`_${item.key}`] != null && '#FF4E5F'}" class="remark-content">
                {{ getFormValue(item.key) }}
                <template v-if="supplierDetailInfo[`_${item.key}`] != null">
                  <el-tooltip placement="top" effect="dark">
                    <div slot="content" style="max-width: 200px">{{ getFormValue(`_${item.key}`) }}</div>
                    <span style="margin-left: 2px; cursor: pointer;"><i class="el-icon-info" style="color: #FF4E5F" /></span>
                  </el-tooltip>
                </template>
              </div>
            </template>
            <el-form-item v-else-if="item.key === 'createUser'" label="创建人：" label-width="8em">
              <CheckUserInfo :user-id="supplierDetailInfo.createUserId" :label="supplierDetailInfo.createUser" />
            </el-form-item>
            <el-form-item v-else :label="item.label" label-width="8em">
              <div v-if="supplierDetailInfo[item.key] || supplierDetailInfo[item.key] === 0" class="form-item-block">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px">{{ getFormValue(item.key) }}</div>
                  <div :style="{color: (supplierDetailInfo[`_${item.key}`] != null || supplierDetailInfo[`_${item.key}`] === 0) && '#FF4E5F'}" class="ellipsisOne">
                    {{ getFormValue(item.key) }}
                  </div>
                </el-tooltip>
              </div>
              <span v-else :style="{color: (supplierDetailInfo[`_${item.key}`] != null || supplierDetailInfo[`_${item.key}`] === 0) && '#FF4E5F'}">--</span>
              <div v-if="supplierDetailInfo[`_${item.key}`] != null || supplierDetailInfo[`_${item.key}`] === 0" class="form-item-block">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px">{{ getFormValue(`_${item.key}`) }}</div>
                  <div style="margin-left: 2px; cursor: pointer;"><i class="el-icon-info" style="color: #FF4E5F" /></div>
                </el-tooltip>
              </div>
            </el-form-item>
          </el-col>
        </template>
        <img v-if="showApprovedIcon && getApprovedIcon && supplierDetailInfo.source === 2" :src="getApprovedIcon" class="approved-png">
      </el-row>
    </el-form>
  </el-row>
</template>

<script>
import SectionTitle from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import SearchContract from '@/components/Common/SearchContract';
import TagSelect from '@/components/Common/tagSelect';
import PendingIcon from '@/assets/auditProcess/process_status_1.png';
import CompletedIcon from '@/assets/auditProcess/process_status_4.png';
import RejectedIcon from '@/assets/auditProcess/process_status_2.png';
import editIcon from '@/assets/medium/editResourceActive.png';
import { SUPPLIER_DETAIL_TYPE, SUPPLIER_MODIFY_STATUS, SUPPLIER_CREATE_TYPE } from '@/utils/const/supplier';
import { supplierSource } from '@/filters/status';
export default {
  name: 'SupplierDetailInfo',
  components: {
    SectionTitle,
    FileShowList,
    TagSelect,
    SearchContract
  },
  props: {
    supplierDetailInfo: {
      type: Object,
      default: () => ({})
    },
    detailType: {
      type: Number,
      default: SUPPLIER_DETAIL_TYPE.SUPPLIER
    },
    supplierId: {
      type: Number | String,
      default: ''
    },
    showMobilePage: {
      type: Boolean,
      default: false
    },
    canEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editIcon,
      SUPPLIER_DETAIL_TYPE,
      attachment: [{
        name: '11.1 sp.png',
        time: 1604979657591,
        url: 'https://res.mjk.feibo.com/2020/11/10/e6c2f2a84f2541edbf040a439728c484'
      }]
    };
  },
  computed: {
    formLabels() {
      return [
        { key: 'createUser', label: '创建人：' },
        { key: 'supplierCode', label: '供应商编号：' },
        { key: 'supplierType', label: '供应商类型：' },
        { key: 'channelName', label: '供应商名称：' },
        { key: 'departmentName', label: '所属部门：' },
        { key: 'isSignUp', label: '是否签约：' },
        { key: 'taxRate', label: '可抵扣税率：' },
        { key: 'source', label: '供应商来源：' },
        { key: 'tag', label: '标签：' },
        { key: 'businessTypeName', label: '行业类别：' },
        { key: 'priceRate', label: '费率：' }
      ];
    },
    explanation() {
      return '1、GC-152【账号资源】导入改名记录失败 —— 部分账号存在该问题，测试环境当时刚好未测到这些账号2、GC-157【供应商结算】存在两部分账号存在该问题，测试环境当时刚好未测到这些账号2、GC-157【供应商结算】存在两部分账号存在该问题，测试环境当时刚好未测到这些账号2、GC-157【供应商结算】存在两单未过审审批单时，最早那单重新修改提交审批完成后，两单的审批进度均显示有误 —— 测试环境漏测该特定场景';
    },
    showModifyTip() {
      return this.detailType === SUPPLIER_DETAIL_TYPE.MODIFY && this.supplierDetailInfo.modifyDesc;
    },
    isCompany() {
      return this.supplierDetailInfo.supplierType === 1;
    },
    showApprovedIcon() {
      return this.supplierDetailInfo.createType === SUPPLIER_CREATE_TYPE.AUTO || this.detailType === SUPPLIER_DETAIL_TYPE.MODIFY;
    },
    getApprovedIcon() {
      let icon = '';
      if (this.detailType === SUPPLIER_DETAIL_TYPE.MODIFY) {
        switch (this.supplierDetailInfo.approvalStatus) {
          case SUPPLIER_MODIFY_STATUS.COMPLETED:
            icon = CompletedIcon;
            break;
          case SUPPLIER_MODIFY_STATUS.REJECTED:
            icon = RejectedIcon;
            break;
          case SUPPLIER_MODIFY_STATUS.PENDING:
            icon = PendingIcon;
            break;
        }
      }
      return icon;
    }
  },
  methods: {
    supplierSource,
    handleEdit() {
      this.$emit('edit', this.supplierDetailInfo);
    },
    getFormValue(key) {
      let value = '--';
      switch (key) {
        case 'supplierType':
        case '_supplierType':
          value = this.getSupplierTypeName(key);
          break;
        case 'publishedStatus':
        case '_publishedStatus':
          value = this.getArticlesStatus(key);
          break;
        case 'region':
        case '_region':
          value = this.supplierDetailInfo[key] && this.supplierDetailInfo[key].replace(/,/g, '-') || '--';
          break;
        case 'sex':
        case '_sex':
          value = this.supplierDetailInfo[key] === 0 ? '男' : '女';
          break;
        case 'taxRate':
        case '_taxRate':
          value = (this.supplierDetailInfo[key] || this.supplierDetailInfo[key] === 0) && this.supplierDetailInfo[key] + '%' || '--';
          break;
        case 'cooperationStatus':
        case '_cooperationStatus':
          value = this.supplierDetailInfo[key] === 0 ? '正常合作' : this.supplierDetailInfo[key] === 1 ? '终止合作' : '--';
          break;
        case 'source':
        case '_source':
          value = this.supplierSource(this.supplierDetailInfo[key]);
          break;
        default:
          value = this.supplierDetailInfo[key] || '--';
          break;
      }
      return value;
    },
    getSupplierTypeName(key) {
      const type = this.supplierDetailInfo[key];
      if (type == null || type === '') return '--';
      return type === 0 ? '个人' : type === 1 ? '公司' : type;
    },
    getArticlesStatus(key) {
      const type = this.supplierDetailInfo[key];
      if (type == null || type === '') return '--';
      return type === 0 ? '正常上刊' : type === 1 ? '解约下刊' : type === 2 ? '处罚停刊' : type;
    }
  }
};
</script>

<style scoped lang="scss">
.supplier-info-container {
  background-color: #fff;
  padding: 16px 24px 24px 24px;
  .edit-btn {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .edit-icon {
    width: 14px;
    margin-left: 6px;
    position: relative;
    top: 2px;
  }
  .supplier-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &::v-deep {
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-form-item__label {
      line-height: 30px;
      color: #999;
    }
    .el-form-item__content {
      line-height: 30px;
    }
  }
  .tip-content {
    font-size: 12px;
    //color: #141C3D;
    color: #FF4E5F;
    background-color: #f9f9f9;
    padding: 8px;
    margin-bottom: 12px;
    line-height: 1.5em;
    text-align: justify;
  }
  .form-content {
    position: relative;
    flex-wrap: wrap;
    // .info-col-item {
    //   //border-right: 1px solid #EBEEFD;
    //   ::v-deep img {
    //     margin-top: 8px;
    //   }
    // }
    //.info-col-item:nth-child(2n + 1) {
    //  transform: translateX(-1px);
    //  border-left: 1px solid #EBEEFD;
    //  border-right: none;
    //}
    .approved-png {
      position: absolute;
      right: 20px;
      top: 10px;
      height: 80px;
      width: 80px;
    }
    .form-item-block {
      display: inline-block;
      max-width: 100%;
      vertical-align: top;
    }
  }
  .remark-row {
    margin-top: 6px;
    font-size: 14px;
    display: flex;
    .remark-label {
      min-width: 112px;
      text-align: right;
      padding-right: 12px;
      color: #999;
    }
    .remark-content {
      line-height: 1.3em;
      display: inline-block;
      color: #333;
    }
  }
  .el-col {
    .el-form-item {
      border-right: 1px solid #eee;
    }
  }
  .el-col:nth-child(3n + 1),
  .el-col:last-child {
    .el-form-item {
      border-right: none;
    }
  }
  .edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 32px;
    font-family: PingFangSC-Medium;
    border: 1px solid #406eff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    color: #406eff;
    img {
      height: 14px;
      width: 14px;
    }
  }
  .edit-btn:hover {
    opacity: .9;
  }
}
.channelName-container {
  display: flex;
}
</style>
